<template>
  <div>
    <!-- 添加表单 -->
    添加表单
    <el-form
      :rules="rules"
      ref="employee"
      :model="employee"
      label-width="80px"
      style="width: 500px"
    >
      <el-form-item label="姓名" prop="ename">
        <el-input v-model="employee.ename"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="employee.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="部门" prop="department.did">
        <el-select
          v-model="employee.department.did"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in departments"
            :key="item.did"
            :label="item.dname"
            :value="item.did"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker
          v-model="employee.birthdate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="employee.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addEmployee('employee')">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (value == undefined || value == "") {
        callback(new Error("邮箱必填"));
      }
      if (!/^\w+@\w+\.\w+$/.test(value)) {
        callback(new Error("邮箱格式错误"));
      } else {
        this.$axios.post("/employee/emailUsed/" + value).then((resp) => {
          if (resp.data.data) {
            callback(new Error("邮箱被使用"));
          } else {
            callback();
          }
        });
      }
    };
    return {
      // 定义验证规则
      rules: {
        ename: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        'department.did': [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
        // email: [{ validator: checkEmail, trigger: "blur" }],
      },
      employee: { department: { did: null } },
      departments: [],
    };
  },
  mounted() {
    this.getAllDepartment();
  },
  methods: {
    //添加员工
    addEmployee(formName) {
      console.log("添加employee=" + JSON.stringify(this.employee));

      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证通过，向后端发送请求
          this.$axios.post("/employee/add", this.employee).then((resp) => {
            this.$message("添加成功");
          });
        } else {
          console.log("前端验证失败");
          return false;
        }
      });

      // this.$axios.post("/employee/add", this.employee).then((resp) => {
      //   if (resp.data.code == 200) {
      //     this.$message("添加成功");
      //   } else {
      //     //101  100
      //     this.$message(JSON.stringify(resp.data.msg));
      //   }
      // });
    },
    //查询所有部门
    getAllDepartment() {
      this.$axios.get("/department/getAll").then((resp) => {
        this.departments = resp.data.data;
      });
    },
  },
};
</script>

<style>
</style>